<script setup lang="ts">
  // 地图
  // #ifdef H5

  import AMapLoader from '@amap/amap-jsapi-loader'
  // #endif
  // 图标
  import carIcon from '@/static/images/car.png'
  import startIcon from '@/static/images/start.png'
  import endIcon from '@/static/images/end.png'
  import { onMounted } from 'vue'
  import type { ExpressData } from '@/type/order'

  interface Props {
    logisticsInfo: ExpressData
  }
  const props = defineProps<Props>()

  onMounted(async () => {
    ;(window as any)._AMapSecurityConfig = {
      securityJsCode: '46b137e1930802858a2d813698b1c737',
    }

    const AMap = await AMapLoader.load({
      key: 'aae5982b2764c898de5068b8bf4a10f4', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Scale'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
    let map = new AMap.Map('map', {
      zoom: 11, //地图级别
      center: [116.397428, 39.90923], //地图中心点
      viewMode: '2D', //设置地图模式
    })
    //引入和创建驾车规划插件
    AMap.plugin(['AMap.Driving'], function () {
      const driving = new AMap.Driving({
        map: map,
        showTraffic: false, // 交通拥堵情况
        mapStyle: 'amap://styles/fresh', //设置地图的显示样式
        hideMarkers: true, // 关闭默认图标
      })
      //获取起终点规划线路
      const startLngLat = props.logisticsInfo.logisticsInfo.pop()
      const endLngLat = props.logisticsInfo.logisticsInfo.shift()
      // 自定义起点和终点样式
      const startMarker = new AMap.Marker({
        position: [startLngLat?.longitude, startLngLat?.latitude], //基点位置
        icon: startIcon,
        anchor: 'bottom-center',
      })
      const endMarker = new AMap.Marker({
        position: [endLngLat?.longitude, endLngLat?.latitude], //基点位置
        icon: endIcon,
        anchor: 'bottom-center',
      })
      const carMarker = new AMap.Marker({
        position: [
          props.logisticsInfo.currentLocationInfo.longitude,
          props.logisticsInfo.currentLocationInfo.latitude,
        ], //基点位置
        icon: carIcon,
        anchor: 'bottom-center',
      })
      map.add(startMarker)
      map.add(endMarker)
      map.add(carMarker)
      driving.search(
        [startLngLat?.longitude, startLngLat?.latitude],
        [endLngLat?.longitude, endLngLat?.latitude],
        // 途径点
        {
          waypoints: props.logisticsInfo.logisticsInfo
            .map((item) => [item.longitude, item.latitude])
            .reverse(),
        },
        function (status: any, result: any) {
          if (status === 'complete') {
            // 3秒后定位到🚗的位置
            setTimeout(() => {
              map.setFitView([carMarker]) // 设置中心点
              map.setZoom(10) // 设置地图缩放级别
            }, 3333)
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        }
      )
    })
  })
</script>

<template>
  <view id="map" class="uni-map"></view>
</template>

<style lang="scss" scoped>
  @import '../index.scss';
</style>
